// 项目列表 首页

<template>
  <f7-page
    class="home"
    ptr
    @ptr:refresh="refresh"
    infinite
    :infinite-distance="50"
    :infinite-preloader="true"
    @infinite="infinite"
  >
    <f7-navbar>
      <f7-nav-left>
        <f7-link @click="openSidebar" v-if="hasQmSdk" icon-f7="bars"></f7-link>
      </f7-nav-left>
      <f7-nav-title>项目监管</f7-nav-title>
      <f7-nav-right>
        <span class="msg">
          <f7-link href="/workflow/list" icon-f7="bell" style="min-width: 0px">
            <van-badge
              :content="todoCount"
              v-show="todoCount > 0"
              style="margin-top: -10px"
            >
              <div class="child" />
            </van-badge>
          </f7-link>
        </span>
      </f7-nav-right>
    </f7-navbar>

    <div class="search-box" :class="{ 'tab-box': isBuild || projectAllPer }">
      <f7-custom-searchbar
        :delay="2000"
        placeholder="请输入项目名称或编码"
        search-container=".search-list"
        search-in=".item-text"
        @search="searchQuery"
        v-model="search.title"
      ></f7-custom-searchbar>
      <span @click="fnOpenPanel()"></span>

      <template v-if="isBuild || projectAllPer">
        <div class="pro-tab fff">
          <div
            @click="fnTabChange('my')"
            ref="proTabItem"
            v-has="'project:index:my'"
          >
            <i></i>
            <span>我的项目（{{ controlData.myCount }}）</span>
          </div>
          <div @click="fnTabChange('all')" v-has="'project:index:all'">
            <i></i>
            <span>所有项目（{{ controlData.totalCount }}）</span>
          </div>

          <span v-if="projectAllPer" :style="tabActiveStyle"></span>
        </div>
      </template>
    </div>

    <!-- 弹出的搜索 -->
    <v-advanced-search
      ref="vAdvancedSearch"
      v-model="showSearch"
      :searchData="searchData"
      @btn:click="emitSearchBtn"
    ></v-advanced-search>
    <!-- 弹出的搜索 end -->

    <f7-list
      media-list
      class="search-list"
      :class="{ 'tab-box-list': isBuild || projectAllPer }"
      v-if="query.data.length > 0"
    >
      <li
        v-for="(item, index) in query.data"
        class="fff"
        :key="index"
        @click="goDetail(item)"
      >
        <div class="conten-header">
          <span>{{ item.engineeName }}</span>
          <span v-if="item.total > 0" class="tag tag-red-fill">危大工程</span>
        </div>
        <div class="tags">
          <span class="tag tag-blue" v-if="item.engineeTypeName">{{
            item.engineeTypeName
          }}</span>
          <span class="tag tag-blue" v-if="item.progressName">{{
            item.progressName
          }}</span>
        </div>
        <section>
          <label>项目编码：</label>
          <span>{{ item.engineeCode }}</span>
        </section>
        <section>
          <label>项目位置：</label>
          <span
            >{{ item.engineeAddress }}
            <f7-icon f7="placemark_fill"></f7-icon>
          </span>
        </section>
        <section>
          <label>视频监控：</label>
          <span>
            <span class="color">{{ item.onLineCameraCount }}</span
            >/{{ item.allCameraCount }}
          </span>
        </section>
      </li>
    </f7-list>

    <van-empty v-else description="暂无数据" />

    <v-navber-construction slot="fixed"></v-navber-construction>
  </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";

export default class instance extends controller {
  enableBackRequest() {
    return false;
  }
  disableCache() {
    return false;
  }
  onBeforeInit() {
    this.urls = {
      model: "/project/enginee/getListModel",
      query: "/project/enginee/query",
    };
  }
  onInit() {
    // this.setSearch("tabCode", 'my', "list")
  }
  onBeforeQuery(type, conditions, params) {
    if (type == "form") {
      params.isMobileCount = 1;
    }
  }
  onAfterQuery(type, isSuccess, result) {
    if (type == "form" && isSuccess) {
      let { controlData } = result;

      // 默认全选中
      // let engineeTypeOpsCodes = controlData.engineeTypeOps.map(item => {
      //     return item.code
      // })
      // let openStatusOpsCodes = controlData.openStatusOps.map(item => {
      //     return item.code
      // })
      // let progressOpsCodes = controlData.progressOps.map(item => {
      //     return item.code
      // })

      this.$data.searchData[0].arr = controlData.engineeTypeOps;
      // this.$data.searchData[0].check = engineeTypeOpsCodes
      this.$data.searchData[1].arr = controlData.openStatusOps;
      // this.$data.searchData[1].check = openStatusOpsCodes
      this.$data.searchData[2].arr = controlData.progressOps;
      // this.$data.searchData[2].check = progressOpsCodes
      this.$data.searchData[4].arr = controlData.dangerTypeOps;
    }

    if (type == "list" && isSuccess) {
      if (result.recordsTotal == 0 && this.$data.isFirst) {
        this.$data.isFirst = false;
        this.$data.search.tabCode = "all";
        this.searchQuery(this.$data.search, "list");
      }
    }

    return result;
  }
  mixin() {
    return {
      data() {
        return {
          isFirst: true,
          controlData: {},
          search: {
            title: "",
            tabCode: "my",
          },
          query: {
            data: [],
          },
          hasQmSdk: false,
          // 是否显示高级搜索
          showSearch: false,
          // 搜索的配置
          searchData: [
            {
              type: "checkbox",
              label: "项目类别",
              arr: [],
              check: [],
              key: "projectType",
            },
            {
              type: "checkbox",
              label: "项目状态",
              arr: [],
              check: [],
              key: "openStatus",
            },
            {
              type: "checkbox",
              label: "形象进度",
              arr: [],
              check: [],
              key: "progress",
            },
            {
              type: "radio",
              label: "是否已接入视频",
              arr: [
                {
                  name: "是",
                  code: "hasCamera",
                },
                {
                  name: "否",
                  code: "noCamera",
                },
              ],
              check: "",
              key: "cameraStatus",
            },
            {
              type: "radio",
              label: "危大工程",
              arr: [],
              check: "",
              key: "dangerType",
            },
          ],
          // tab子项的width
          proTabItemWidth: 0,
          todoCount: 0,
        };
      },
      methods: {
        // 打开高级搜索
        fnOpenPanel() {
          this.showSearch = true;
        },
        // 搜索操作
        emitSearchBtn({ data }) {
          this.search = Object.assign({}, this.search, data);
          this.searchQuery(this.search, "list");
        },
        openSidebar() {
          window.qmsdk.openSidebar();
        },
        // 切换tab
        fnTabChange(tabCode) {
          this.search.tabCode = tabCode;
          this.searchQuery(this.search, "list");
        },
        getTodoCount() {
          this.$f7.request.postJSON("/workflow/toDoList/getCount", (r) => {
            if (r && r.success) {
              this.todoCount = r.count;
            }
          });
        },
        goDetail(item) {
          if (this.hasQmSdk || !this.$framework.account.hasRole('SUPPLIER_PERSON')) {
            this.$f7router.navigate(
              `/business/construction/enginee/supervise?engineeId=${item.engineeId}`
            );
          } else {
            this.$f7router.navigate(
            `/business/supervision/deliveryNote/create?engineeId=${item.engineeId}&pageAction=create`
          );
          }
        },
      },
      beforeMount() {
        this.getTodoCount();
      },
      mounted() {
        if (this.$refs.proTabItem) {
          this.proTabItemWidth = this.$refs.proTabItem.offsetWidth;
        }
        if (window.qmsdk) {
          this.hasQmSdk = true;
        }
      },
      computed: {
        // isTab () {
        //     return this.$framework.account.hasPermission('project:enginee:all')
        //     // return true
        // },
        // 所有项目的权限
        projectAllPer() {
          return (
            this.$framework.account.hasPermission("project:index:my") &&
            this.$framework.account.hasPermission("project:index:all")
          );
        },
        // 是否是建设单位
        isBuild() {
          let role = ["BUILD_MANAGER"];

          role = role.map((item) => {
            item = item.toLowerCase();
            return item;
          });

          return this.$framework.account.hasRole(role);
        },
        // tab的激活下标
        tabActive() {
          let index = 0;

          if (this.search.tabCode == "my") {
            index = 0;
          } else if (this.search.tabCode == "all") {
            index = 1;
          }

          return index;
        },
        // tab激活的样式
        tabActiveStyle() {
          if (this.proTabItemWidth) {
            let itemWidth = this.proTabItemWidth,
              index = this.tabActive;

            let width = itemWidth * 0.2,
              left = 16 + itemWidth * 0.4,
              translateX = itemWidth * index;

            return {
              width: width + "px",
              left: left + "px",
              transform: `translateX(${translateX}px)`,
            };
          }

          return {};
        },
      },
      beforeDestroy() {
        this.isFirst = true;
      },
    };
  }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

.home {
  .search-box {
    display: flex;
    align-items: center;
    background-color: #3385ff;
    position: relative;

    @{deep}.searchbar {
      flex: 1;
      font-size: 16px;
      height: 35px;
      border-radius: 35px;
      overflow: hidden;
      margin-left: 16px;

      input[type="search"] {
        font-size: 16px;
      }
    }

    > span {
      flex-shrink: 0;
      padding: 10px;
      width: 17px;
      height: 17px;
      background: url("../../../../assets/img/search.png") no-repeat center /
        17px;
    }

    &.tab-box {
      padding-bottom: 80px;
      background: linear-gradient(180deg, #3385ff 0%, #f9f9f9 100%);

      > .pro-tab {
        position: absolute;
        left: 0;
        right: 0;
        top: 56px;
        box-sizing: border-box;
        margin: auto;
        width: 343px;
        height: 99px;
        background: #ffffff;
        box-shadow: 0px 5px 10px 0px rgba(64, 121, 184, 0.08);
        border-radius: 8px;
        display: flex;
        justify-content: center;
        padding: 16px;

        div {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;

          > i {
            width: 40px;
            height: 40px;
            margin-bottom: 7px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
          }

          > span {
            font-size: 14px;
            font-weight: 400;
            color: #0f1826;
            line-height: 20px;
          }

          &:nth-of-type(1) > i {
            background-image: url("../../../../assets/img/wdxm.png");
          }

          &:nth-of-type(2) > i {
            background-image: url("../../../../assets/img/zxm.png");
          }
        }

        > span {
          position: absolute;
          height: 2px;
          background-color: #3385ff;
          bottom: 2px;
          transition: transform 222ms;
          -webkit-transition: transform 222ms;
        }
      }
    }
  }

  .search-list {
    margin-top: 0;

    &.tab-box-list {
      padding-top: 24px;
    }

    @{deep}ul {
      background: none;
      padding: 10px 16px;
    }

    li {
      box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      border: 1px solid #edf0f6;
      padding: 16px;
      margin-bottom: 10px;
      font-size: 14px;

      .conten-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-weight: 600;
        font-size: 16px;

        .tag {
          flex-shrink: 0;
          margin-left: 20px;
        }
      }

      > .tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .tag {
          max-width: 260px;
          margin: 0 6px 6px 0;
        }
      }

      section {
        display: flex;
        color: #666;

        > label {
          flex-shrink: 0;
          color: #9ea7b7;
        }

        > span {
          display: flex;
          justify-content: space-between;

          .f7-icons {
            flex-shrink: 0;
            color: #3385ff;
            font-size: 18px;
          }

          .color {
            color: #3385ff;
          }
        }
      }
    }
  }
}

@{deep}.searchbar-backdrop {
  background-color: transparent;
}
</style>
